<template>
  <div class="subject-container">
    <div class="app-container">
      <el-card class="subject-card" :body-style="{ padding: '0px' }">
        <el-row type="flex" justify="space-between" class="action-bar">
          <el-form :inline="true">
            <el-form-item size="small">
              <el-input
                v-model="query.subject_name"
                clearable
                placeholder="学科名称"
              />
            </el-form-item>
            <el-form-item size="small">
              <el-select
                v-model="query.is_show"
                clearable
                placeholder="显示状态"
              >
                <el-option label="显示" :value="1" />
                <el-option label="隐藏" :value="2" />
              </el-select>
            </el-form-item>

            <el-form-item size="small">
              <el-button
                type="primary"
                plain
                @click="loadSubjectList"
              >搜索</el-button>
              <el-button plain @click="reset">重置</el-button>
            </el-form-item>
          </el-form>

          <el-button
            type="primary"
            plain
            @click="isEditSubjectShow = true"
          >创建学科</el-button>
        </el-row>
        <el-table :data="subjectList" style="width: 100%">
          <el-table-column type="index" label="序号" width="120" align="center" />
          <el-table-column prop="id" label="学科id" width="70" align="center" />
          <el-table-column prop="subject_name" label="学科名称" align="center" />
          <el-table-column label="学科图标" align="center">
            <template slot-scope="{ row }">
              <el-image
                v-if="row[`subject_icon`]"
                style="width: 40px; height: 40px"
                :src="`http://122.51.249.55:7005/${row[`subject_icon`]}`"
              />
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="创建人" align="center" />
          <el-table-column label="是否显示" align="center">
            <template v-slot="{ row }">
              <el-switch
                :value="row.is_show"
                :active-value="1"
                :inactive-value="2"
                active-color="#409eff"
                active-text="是"
                inactive-text="否"
                @change="toggleShowState(row, $event)"
              />
            </template>
          </el-table-column>
          <el-table-column label="目录数量" align="center">
            <template v-slot="{ row }">
              <el-link
                :type="row.cate_num ? 'primary' : ''"
                @click="
                  row.cate_num &&
                    $router.push(`/subject/directory?subject_id=${row.id}`)
                "
              >{{ row.cate_num
              }}<i
                v-if="row.cate_num"
                class="el-icon-link el-icon--right"
              />
              </el-link>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template v-slot="{ row }">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                circle
                @click="editSubject(row.id)"
              />
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small"
                circle
                @click="delRow(row.id)"
              />
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            :current-page.sync="query.page"
            :page-sizes="[5, 6, 8, 10]"
            :page-size="query.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
          >
            >
          </el-pagination>
        </div>
      </el-card>
    </div>

    <edit-subject
      ref="editSub"
      :dialog-visible.sync="isEditSubjectShow"
      @update-list="loadSubjectList"
    />
  </div>
</template>
<script>
import {
  fetchSubjectList,
  editSubjectData,
  deleteSubjectData
} from '@/api/subject_c'

import EditSubject from './components/edit-subject.vue'

export default {
  name: 'Subject',
  components: {
    EditSubject
  },
  props: {},
  data() {
    return {
      subjectList: [],
      query: {
        limit: 10,
        page: 1
      },
      total: 0,

      isEditSubjectShow: false
    }
  },

  created() {
    this.loadSubjectList()
  },
  mounted() {},
  methods: {
    // 点击编辑按钮，通过ref调用子组件方法，获取用于回显的数据
    editSubject(id) {
      this.$refs.editSub.loadSubjectData(id)
      this.isEditSubjectShow = true
    },
    // 加载学科列表
    async loadSubjectList() {
      const { data } = await fetchSubjectList(this.query)
      this.total = data.total
      this.subjectList = data.list
    },
    // 当前每页显示数量改变时触发
    sizeChange(val) {
      this.query.limit = val
      this.loadSubjectList()
    },
    // 当前页码改变时触发
    currentChange(val) {
      this.query.page = val
      this.loadSubjectList()
    },
    // 切换显示状态
    async toggleShowState(row, is_show) {
      const resp = await editSubjectData({
        id: row.id,
        sort: row.sort,
        subject_name: row.subject_name,
        is_show
      })
      if (!resp.success) {
        return this.$message.error(resp.msg)
      }
      this.$message.success('更新显示状态成功')
      row.is_show = is_show
    },
    // 重置搜索框
    reset() {
      this.query = {
        limit: 10,
        page: 1
      }
      this.loadSubjectList()
    },
    async delRow(id) {
      await this.$confirm('确定删除该学科吗？', '删除学科')
      const resp = await deleteSubjectData(id)
      if (!resp.success) {
        return this.$message.error(resp.msg)
      }
      this.$message.success('删除学科成功')

      if (this.query.page !== 1 && this.subjectList.length === 1) {
        this.query.page--
      }
      this.loadSubjectList()
    }
  }
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-card__body {
//   padding: 0px !important;
// }
.action-bar {
  height: 72px;
  padding: 16px;
}
.pagination-container {
  margin: 0;
  background: #fff;
  padding: 10px 16px 32px;
  .el-pagination {
    display: flex;
    justify-content: end;
    margin-top: 10px;
  }
}
</style>
